<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Star Rating Demo</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 引入 jQuery 库 -->
    <script src="js/jquery-3.6.4.min.js"></script>
    <!-- 引入 Bootstrap JavaScript 插件 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        /* 高亮星号 */
        .star-rating .glyphicon-star,
        .star-rating .glyphicon-star-empty {
            font-size: 2.5em;
            color: #ccc;
            cursor: pointer;
        }
        /* 高亮选中的星号 */
        .star-rating .glyphicon-star {
            color: #ff9900;
        }
    </style>
    <script>
        $(function() {
            $("#top").load("top.html")
            // 用户评分星星
            let rating = 0;
            $('.star-rating .glyphicon-star, .star-rating .glyphicon-star-empty')
                .click(function() {
                    // 更新评分值
                    rating = $(this).data('rating');
                    // 发送评分到服务器（此处省略）
                    console.log('您给了 ' + rating + ' 分！');
                    // 更新视图
                    $('.star-rating .glyphicon-star, .star-rating .glyphicon-star-empty')
                        .removeClass('glyphicon-star')
                        .addClass('glyphicon-star-empty');
                    $(this).prevAll().addBack().addClass('glyphicon-star');
                    $(this).prevAll().addBack().removeClass('glyphicon-star-empty');
                });
            //提交绑定事件
            $("#submit").click(function (){
                //判断是否选择了星星
                if(rating===0){
                    alert("亲,请进行星星打分评价捏")
                }else {
                    //接收传过来的iid 并发送ajax请求 数据提交给后端去保存
                    const searchParams = new URLSearchParams(location.search);
                    const iid = searchParams.get("iid");
                    const pid = searchParams.get("pid");
                    //获取评论
                    let comment = $("#product1-comment").val()
                    //发送ajax请求
                    $.ajax({
                        url: "/PDD/evaluation?method=addEvaluation",
                        data: {
                            "iid": iid,
                            "pid": pid,
                            "score": rating,
                            "comment": comment
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 1) {
                                alert("提交成功,感谢您的评价!")
                                window.history.back()
                            } else if(data.code===400){
                                alert("提交失败,您的评论存在敏感词,请文明用语")
                            } else {
                                alert("处理失败,请您重新提交")
                            }
                        },
                        error: function (jqXHR) {
                            alert("失败" + jqXHR.responseText); // 输出响应内容
                        }
                    })
                }
            })
        });
    </script>
</head>

<body>
<div id="top"></div>
<div class="container" style="margin-top: 5%">
    <h1>用户上帝评价表</h1>

    <div class="form-group">
        <label>请对我们的产品进行评分:</label>
        <div class="star-rating">
            <span class="glyphicon glyphicon-star-empty" data-rating="1"></span>
            <span class="glyphicon glyphicon-star-empty" data-rating="2"></span>
            <span class="glyphicon glyphicon-star-empty" data-rating="3"></span>
            <span class="glyphicon glyphicon-star-empty" data-rating="4"></span>
            <span class="glyphicon glyphicon-star-empty" data-rating="5"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="product1-comment">评论:</label>
        <textarea id="product1-comment" class="form-control" rows="3"></textarea>
    </div>
    <button id="submit" type="button" class="btn btn-primary">提交</button>

</div>
</body>
</html>
